<template>
  <div>
    <Page auto-content-height>
      <FosoTable
        ref="roleTable"
        :columns="columns"
        :extra-table-config="{
          rowGroupConfig: {
            rowField: ['role'],
          },
        }"
        :request-api="getRoleListData"
        toolbarbutton-name="新增仓库"
      >
        <template #title>
          <text class="text-[16px]">仓库管理 </text>
        </template>
        <template #extraActionButtons="{ row }">
          <!-- 商品录入按钮 -->
          <el-button link type="danger" @click="handleAddGoods(row)">
            商品录入
          </el-button>
        </template>
      </FosoTable>
    </Page>
  </div>
</template>

<script setup lang="tsx">
import { Page } from '@vben/common-ui';
import { $t } from '@vben/locales';

const roleTable = ref();
const getRoleListData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        total: 1,
        items: [
          {
            id: 10_001,
            name: '香港中央仓库',
            type: '主要存储电子产品和高价值商品',
            size: '香港九龙观塘道88号',
            price: '运营中',
            class: '高仿',
            date: '2020-08-01',
            stock: 12_500,
          },
          {
            id: 10_002,
            name: '深圳保税仓库',
            type: '跨境商品临时存储和中转',
            size: '深圳福田保税区红柳道2号',
            price: '运营中',
            class: '正品',
            date: '2021-04-01',
            stock: 8700,
          },
          {
            id: 10_003,
            name: '深圳3C产品专区',
            type: '手机、电脑等电子产品专用存储',
            size: '深圳福田保税区红柳道2号-A区',
            price: '运营中',
            class: '高仿',
            date: '2020-03-01',
            stock: 3200,
          },
          {
            id: 10_004,
            name: '苹果产品专区',
            type: 'iPhone、iPad等苹果系列产品',
            size: '深圳福田保税区红柳道2号-A区1层',
            price: '维护中',
            class: 'Super Clone',
            date: '2021-04-01',
            stock: 1500,
          },
          {
            id: 10_005,
            name: '三星产品专区',
            type: '三星手机及配件存储',
            size: '深圳福田保税区红柳道2号-A区2层',
            price: '运营中',
            class: '高仿',
            date: '2021-04-01',
            stock: 800,
          },
          {
            id: 10_006,
            name: 'Galaxy S系列专区',
            type: '三星Galaxy S系列最新机型',
            size: '深圳福田保税区红柳道2号-A区2层101',
            price: '运营中',
            class: 'Super Clone',
            date: '2021-10-01',
            stock: 450,
          },
          {
            id: 10_007,
            name: 'Galaxy Note专区',
            type: '三星Note系列存储区',
            size: '深圳福田保税区红柳道2号-A区2层102',
            price: '暂停使用',
            class: '高仿',
            date: '2020-01-01',
            stock: 200,
          },
          {
            id: 10_008,
            name: '奢侈品专区',
            type: '名牌包、手表等高价值商品',
            size: '深圳福田保税区红柳道2号-B区',
            price: '运营中',
            class: 'Super Clone',
            date: '2021-06-01',
            stock: 2800,
          },
          {
            id: 10_009,
            name: '广州白云仓库',
            type: '服装、日用品等普通商品存储',
            size: '广州白云区机场路1315号',
            price: '运营中',
            class: '正品',
            date: '2020-11-01',
            stock: 15_600,
          },
          {
            id: 10_010,
            name: '服装专区',
            type: '各类品牌服装存储',
            size: '广州白云区机场路1315号-北区',
            price: '运营中',
            class: '正品',
            date: '2021-06-01',
            stock: 8700,
          },
          {
            id: 10_011,
            name: '运动服装区',
            type: 'Nike、Adidas等运动品牌',
            size: '广州白云区机场路1315号-北区1层',
            price: '运营中',
            class: '高仿',
            date: '2021-06-01',
            stock: 4200,
          },
          {
            id: 10_012,
            name: '奢侈服装区',
            type: 'Gucci、LV等奢侈品牌',
            size: '广州白云区机场路1315号-北区2层',
            price: '运营中',
            class: 'Super Clone',
            date: '2021-06-01',
            stock: 1800,
          },
          {
            id: 10_013,
            name: '日用品专区',
            type: '化妆品、日用品等',
            size: '广州白云区机场路1315号-南区',
            price: '运营中',
            class: '正品',
            date: '2021-06-01',
            stock: 6900,
          },
          {
            id: 10_014,
            name: '化妆品区',
            type: '国际品牌化妆品',
            size: '广州白云区机场路1315号-南区1层',
            price: '运营中',
            class: '高仿',
            date: '2021-06-01',
            stock: 3500,
          },
          {
            id: 10_015,
            name: '日化区',
            type: '洗发水、沐浴露等日化产品',
            size: '广州白云区机场路1315号-南区2层',
            price: '运营中',
            class: '正品',
            date: '2021-06-01',
            stock: 3400,
          },
          {
            id: 10_016,
            name: '上海浦东仓库',
            type: '华东地区主要分销中心',
            size: '上海浦东新区金海路1000号',
            price: '运营中',
            class: '正品',
            date: '2020-10-01',
            stock: 13_400,
          },
          {
            id: 10_017,
            name: '电子产品区',
            type: '各类电子产品存储',
            size: '上海浦东新区金海路1000号-东区',
            price: '运营中',
            class: '高仿',
            date: '2021-06-01',
            stock: 7800,
          },
          {
            id: 10_018,
            name: '家居用品区',
            type: '家具、家居装饰品等',
            size: '上海浦东新区金海路1000号-西区',
            price: '建设中',
            class: '正品',
            date: '2021-06-01',
            stock: 5600,
          },
        ],
      });
    }, 500);
  });
};
// SKU、产品图、描述、成本价、类型（高仿 / Super Clone
const columns = computed(() => [
  { type: 'seq', width: 70 },
  { field: 'name', title: '仓库名称', minWidth: 300, treeNode: true },
  { field: 'size', title: '仓库地址' },
  {
    field: 'type',
    title: '描述',
  },
  {
    title: '仓库类型',
    field: 'class',
    slots: {
      default: () => {
        return <ElTag type="success">一级</ElTag>;
      },
    },
  },
  {
    title: '仓库状态',
    field: 'price',
  },
  {
    title: '仓库量',
    field: 'stock',
  },
  { field: 'date', title: $t('sys.role.createTime') },
  {
    title: $t('sys.role.operation'),
    minWidth: 200,
    slots: { default: 'action' },
  },
]);
const handleAddGoods = (row: any) => {
  throw new Error('test', row);
};
</script>
